<template>
  <Popup
    v-model:show="showPopup"
    :style="{
      background: 'transparent',
      overflow: 'hidden',
      height: '100vh',
      'max-width': '100vw',
    }"
    ><div class="vessel">
      <div @click="showPopup = false" class="reelect-box">
        <div class="reelect-txt">返回</div>
      </div>
      <div class="track-vessel">
        <div class="track-title">{{ dayjs().format("MM月DD日") }}学生轨迹</div>
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了~"
          @load="onLoad"
        >
          <van-cell
            v-for="item in trackList"
            :key="item?.id"
            class="steps-item-box"
          >
            <div class="steps-item">
              <div class="time">
                {{ dayjs(item?.occurTime).format("HH:mm") }}
              </div>
              <div class="place">{{ Location[item?.position - 1] }}</div>
            </div>
            <div class="steps-item-flex-box">
              <div class="vertical-border-line"></div>
              <img :src="item.fullImage" class="step-img" />
            </div>
          </van-cell>
        </van-list>
      </div>
      <div class="phone-box">
        <img src="@/assets/image/phone-heard.png" class="phone-box-heard" />
        <div class="phone-body-box">
          <div class="phone-body-title">本日数据</div>
          <div class="phone-body-flex-box">
            <div class="item-box">
              <div class="item-tile">{{ total }}个</div>
              <div class="item-content">到达场所</div>
            </div>
            <div class="item-box">
              <div class="item-tile">{{ arriveTime }}</div>
              <div class="item-content">到校/出寝</div>
            </div>
            <div class="item-box">
              <div class="item-tile">{{ outTime }}</div>
              <div class="item-content">出校/就寝</div>
            </div>
          </div>
          <div class="video-button" @click="taskPlayBack">
            <img src="@/assets/image/video.png" class="video" />点击播放轨迹动画
          </div>
        </div>
      </div>
    </div>
  </Popup>
</template>
<script lang="ts" setup>
import { getStudentTrack } from "@/api/common";
import { useMainStore } from "@/store";
import dayjs from "dayjs";
import { Popup, showToast } from "vant";
import { computed, ref, watch } from "vue";
const showPopup = defineModel<boolean>("showPopup");
const pagination = ref({
  studentId: "",
  occurTime: "",
  schoolId: "",
  actionTypeList: [],
});
const mainStore = useMainStore();
const studentInfo = computed(() => mainStore.studentInfo);
const loading = ref(false);
const finished = ref(false);
const arriveTime = ref("-");
const outTime = ref("-");
const trackList = ref([] as any);
const total = ref(0);
const Location = [
  "食堂",
  "操场",
  "图书馆",
  "教室",
  "体育馆",
  "宿舍",
  "厕所",
  "超市",
  "门卫",
];

watch(showPopup, (newValue) => {
  if (!newValue) return;
  init();
});

const emit = defineEmits(["child-event"]);

function taskPlayBack() {
  if (!trackList.value.length) {
    return showToast("暂无轨迹数据");
  }
  const data: any[] = [];
  trackList.value.map((item: any) => {
    data.push(item.position);
  });
  emit("child-event", data);
}

function onLoad() {
  getStudentTrack(pagination.value).then((res) => {
    loading.value = false;
    finished.value = true;
    trackList.value = res.data.trajectoryList;
    arriveTime.value = res.data.inTime;
    outTime.value = res.data.outTime;
    total.value = res.data.total;
  });
}

function init() {
  pagination.value.studentId = studentInfo.value?.studentId;
  pagination.value.occurTime = dayjs().format("YYYY-MM-DD");
  getStudentTrack(pagination.value).then((res) => {
    trackList.value = res.data.trajectoryList;
    loading.value = false;
    finished.value = true;
    arriveTime.value = res.data.inTime;
    outTime.value = res.data.outTime;
    total.value = res.data.total;
  });
}
</script>
<style lang="scss" scoped>
.vessel {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  .phone-box {
    position: relative;
    width: 358px;
    height: calc(650 / 812 * 100vh);
    border-radius: 30px 30px 0 0;
    background: #f0a773;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    .video-button {
      width: 168px;
      height: 44px;
      border-radius: 12px;
      opacity: 1;
      background: linear-gradient(90deg, #ffc500 0%, #ffb200 100%);
      box-sizing: border-box;
      border: 1px solid #ffffff;
      box-shadow: 0px 0px 10px 0px rgba(195, 195, 195, 0.3);
      font-family: Source Han Sans;
      font-size: 14px;
      font-weight: 350;
      line-height: 19.6px;
      letter-spacing: 0px;
      color: #ffffff;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 23px auto;
      .video {
        width: 35px;
        width: 35px;
        margin: -5px;
      }
    }
    .phone-body-box {
      position: absolute;
      top: 28px;
      left: 15px;
      width: 327.01px;
      height: 559px;
      border-radius: 10px;
      background: #f6f6f6;
      .phone-body-flex-box {
        display: flex;
        align-items: center;
        gap: 9px;
        margin: 0 10px 0 10px;
        .item-box {
          width: 96px;
          height: 94px;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          gap: 2px;
          border-radius: 10px;
          opacity: 1;
          background: #ffffff;
          box-shadow: 0px 4px 10px 0px rgba(228, 228, 228, 0.3);
          .item-tile {
            font-family: Source Han Sans;
            font-size: 20px;
            font-weight: 500;
            line-height: 28px;
            text-align: center;
            letter-spacing: 0px;
            font-variation-settings: "opsz" auto;
            color: #ffc500;
          }
          .item-content {
            font-family: Source Han Sans;
            font-size: 14px;
            font-weight: 350;
            line-height: 22px;
            text-align: center;
            letter-spacing: 0px;
            color: #666666;
          }
        }
      }
      .phone-body-title {
        margin: 2px 0 0 10px;
        font-family: Source Han Sans;
        font-size: 16px;
        font-weight: 350;
        line-height: 28px;
        letter-spacing: 0px;
        color: #333333;
      }
    }
    .phone-box-heard {
      margin: 7px 0 0 0;
      width: 87px;
      height: 16px;
    }
    .phone-box-button {
      width: 47.5px;
      height: 47.5px;
      position: absolute;
      bottom: 5px;
      left: 138.51px;
    }
  }
  .steps-item-box {
    width: 335px;
    margin: 0 auto;
    background: transparent;
    .steps-item-flex-box {
      display: flex;
      align-items: center;
      .vertical-border-line {
        border-left: 2px solid #ffc500;
        height: 84px;
        width: 1px;
        margin: 11px 0 11px 49px;
      }
      .step-img {
        margin: 11px 0 11px 55px;
        width: 116px;
        height: 65.25px;
      }
    }
    .steps-item {
      width: 335px;
      height: 32px;
      border-radius: 100px;
      opacity: 1;
      background: #ffffff;
      box-shadow: 0px 0px 10px 0px rgba(195, 195, 195, 0.3);
      display: flex;
      align-items: center;
      .time {
        width: 79px;
        height: 32px;
        border-radius: 100px;
        opacity: 1;
        background: linear-gradient(90deg, #ffc500 0%, #ffb200 100%);
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: Source Han Sans;
        font-size: 16px;
        font-weight: 350;
        line-height: 28px;
        letter-spacing: 0px;
        color: #ffffff;
      }
      .place {
        margin: 0 0 0 15px;
        font-family: Source Han Sans;
        font-size: 16px;
        font-weight: 350;
        line-height: 28px;
        letter-spacing: 0px;
        color: #333333;
      }
    }
  }
  .track-vessel {
    flex-shrink: 0;
    margin: 7px auto 9px;
    width: 355px;
    height: calc(463 / 812 * 100vh);
    overflow-y: scroll;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(5px);
    .track-title {
      margin: 0 0 0 15px;
      font-family: Source Han Sans;
      font-size: 18px;
      font-weight: 500;
      line-height: 50px;
      letter-spacing: 0px;
      font-variation-settings: "opsz" auto;
      color: rgba(255, 255, 255, 1);
      z-index: 99;
    }
  }
  .reelect-box {
    margin: calc(10px + var(--dynamic-top)) 0 0 20px;
    width: 64px;
    height: 28px;
    background: url("@/assets/image/back.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    .reelect-txt {
      font-family: Source Han Sans;
      font-size: 14px;
      font-weight: 500;
      line-height: 28px;
      letter-spacing: 0px;
      font-variation-settings: "opsz" auto;
      color: #ffffff;
      margin: 0 0 0 20px;
      text-align: center;
    }
  }
}
</style>
